<template>
  <div v-if="item" class="favoriteArticle" @click.stop="toArticle">
    <div class="img">
      <van-image
        width="140px"
        height="auto"
        lazy-load
        :src="item.cover"
        radius="10px"
      />
      <div class="duration">{{ item.duration | time }}</div>
    </div>
    <div class="title">{{ item.title }}</div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  methods: {
    toArticle() {
      this.$router.push({ path: "/article", query: { id: this.item.id } });
    },
  },
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
  },
};
</script>

<style lang="scss" scoped>
.favoriteArticle {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  width: 140px;

  .img {
    position: relative;
    margin-bottom: 5px;

    .duration {
      position: absolute;
      right: 7px;
      bottom: 5px;
      color: white;
      font-size: 12px;
    }

    :deep(.van-image) {
      display: block !important;
    }
  }

  .title {
    // width: 120px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
